<template>
  <div>
    <p>党江超薪水为: {{ salary }}--<button @click="salary++">涨工资</button></p>
    <p>
      党江超女友: {{ girlfriend.name }}--{{ girlfriend.salary }} --<button
        @click="girlfriend.salary += 10000"
      >
        涨工资
      </button>
    </p>
  </div>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  setup() {
    const salary = ref(10000);
    const girlfriend = reactive({
      name: "小丽",
      salary: 20000,
    });

    // 语法:
    // watch("要监听的数据", (newvalue, oldvalue) => {}, { immediate: true });
    // 注意: 要监听的数据可以为数组

    //  监听基本属性类型,immediate 为初始化监听
    // watch(
    //   salary,
    //   (newvalue, oldvalue) => {
    //     console.log(newvalue, oldvalue);
    //   },
    //   { immediate: true }
    // );

    // 监听复杂数据类型,默认深度监听,immediate 为初始化监听
    // watch(
    //   girlfriend,
    //   (newvalue) => {
    //     console.log(newvalue);
    //   },
    //   { immediate: true }
    // );

    // 综合写法
    watch(
      [salary, girlfriend],
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue);
      },
      { immediate: true }
    );

    return {
      salary,
      girlfriend,
    };
  },
};
</script>
<style scoped>
</style>